<route lang="json5" type="page">
{
    layout: "default",
    style: {
        navigationBarTitleText: "订单详情",
    },
}
</route>

<template>
    <view class="m-base-box m-order-detail pt-4">
        <wd-card>
            <view class="flex flex-col items-start gap-1 pt-2 pb-4 w-[100%]">
                <wd-text :text="info?.wxOrderId" size="14px" color="#000" prefix="单号："></wd-text>
                <view class="flex items-center mt-2 w-[100%]">
                    <wd-text :text="info?.ticketName" size="16px" color="#000" bold></wd-text>
                </view>
                <view class="flex flex-col justify-center mt-2 gap-2">
                    <wd-text :text="info?.spotName" size="14px" color="#000" prefix="景区："></wd-text>
                    <wd-text :text="info?.price" size="14px" color="#000" prefix="金额："></wd-text>
                    <wd-text :text="info?.ticketCount" size="14px" color="#000" prefix="门票数："></wd-text>
                    <wd-text :text="info?.payMode" size="14px" color="#000" prefix="支付方式："></wd-text>
                    <wd-text
                        :text="timeFormat(info?.reservationTime)"
                        size="14px"
                        color="#000"
                        prefix="预约时间："
                        v-if="info?.reservationTime"
                    ></wd-text>
                    <wd-text :text="info?.createTime" size="14px" color="#000" prefix="订单时间："></wd-text>

                    <wd-popup
                        v-model="showPopup"
                        position="bottom"
                        closable
                        custom-style="height: 200px;"
                        @close="showPopup = false"
                    >
                        <wd-card title="选择日期">
                            <view class="border border-solid mb-2">
                                <wd-calendar
                                    v-model="reservationTime"
                                    placeholder="请选择时间"
                                    prop="reservationTime"
                                    :min-date="minDate"
                                    class="border"
                                />
                            </view>
                            <wd-button block @click="handleConfirm">立即预约</wd-button>
                        </wd-card></wd-popup
                    >
                </view>
            </view>
            <view class="pb-4 flex gap-2 w-[100%] justify-end" v-if="!info?.reservationTime">
                <wd-button type="error" @click="handleRefund" v-if="btnShow()">申请退款</wd-button>
                <wd-button @click="showPopup = true">立即预约</wd-button>
            </view>
            <view class="pb-4" v-else>
                <wd-text
                    v-if="info?.status != '已完成'"
                    text="如行程有变需要退款，请在景点购票页面电话联系客服"
                    size="14px"
                    color="red"
                    prefix="提示："
                ></wd-text>
            </view>
        </wd-card>
        <wd-card class="mt-4" v-if="info?.spotimage?.url">
            <view class="w-[100%] mt-2">
                <wd-img :src="info?.spotimage?.url" mode="widthFix" width="100%">
                    <template #error>
                        <view class="w-[100%] flex items-center justify-center h-[100%] bg-coolgray-100">
                            加载失败
                        </view>
                    </template>
                    <template #loading>
                        <view class="flex justify-center items-center w-[100%] h-[100%]">
                            <wd-loading />
                        </view>
                    </template>
                </wd-img>
            </view>
        </wd-card>
    </view>
</template>

<script lang="ts" setup>
import { detailUsingGet1, updateReservationTimeUsingPost, refundUsingPost } from "@/service/app";
import { timeFormat } from "@/utils";
import { useToast } from "wot-design-uni";
const toast = useToast();
const minDate = ref(new Date().getTime());
const info = ref<any>({});
const showPopup = ref(false);
const reservationTime = ref<any>(null);
function getDetail(id: string) {
    toast.loading({
        loadingType: "ring",
        msg: "加载中...",
    });
    detailUsingGet1({ params: { id } }).then((res) => {
        console.log(res, "res");
        if (res?.code == 200) {
            toast.close();
            info.value = res?.data || {};
            if (info.value?.bookTime == "tomorrow") minDate.value = new Date().getTime() + 24 * 60 * 60 * 1000;
        } else {
            toast.error(res?.msg);
        }
    });
}
function handleConfirm() {
    if (!reservationTime.value) {
        toast.error("请选择时间");
        return;
    }
    toast.loading({
        loadingType: "ring",
        msg: "提交预约...",
    });
    updateReservationTimeUsingPost({
        body: { id: info.value.id, reservationTime: timeFormat(reservationTime.value) },
    }).then((res) => {
        console.log(res, "res");
        toast.success("预约成功");
        getDetail(info.value.id);
        showPopup.value = false;
    });
}
function btnShow() {
    if (info.value.status == "已支付") return true;
    return false;
}
function handleRefund() {
    toast.loading({
        loadingType: "ring",
        msg: "申请退款...",
    });
    refundUsingPost({ body: { id: info.value.id } }).then((res) => {
        console.log(res, "res");
        if (res?.code == 200) {
            toast.success("退款成功");
        } else {
            toast.error(res?.msg);
        }
        getDetail(info.value.id);
    });
}
onLoad((value) => {
    getDetail(value?.id);
});
</script>

<style lang="scss" scoped>
//
</style>
